@import 'common';

%headline {
    width: 94.4vw;
    height: 7.3333vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
        img {
            width: 7.4667vw;
            height: 7.2vw;
            vertical-align: middle;
        }

        span {
            font-size: 4vw;
        }
    }

    .right {
        display: flex;
        align-items: center;

        img {
            width: 3.3333vw;
            height: 3.4667vw;
            vertical-align: middle;
        }

        span {
            font-size: 3.2vw;
        }
    }
}





.web {
    header {
        .select {
            width: 21.2vw;
            height: 7.4667vw;
            border: solid .2667vw #ff9344;
            appearance: none;
            background: url(../img/index/pull-down.png);
            background-repeat: no-repeat;
            background-position: 15vw 2vw;
            background-size: 4.2667vw 2.1333vw;
            padding-left: 2vw;
            box-sizing: border-box;
            position: relative;
        }
    }



    //内容
    main {


        // 搜索
        .search {

            padding-top: 4.8vw;

            .top {
                width: 35.4667vw;
                margin: 0 auto;

                input {
                    width: 35.4667vw;
                    height: 6.8vw;
                    border-radius: 4vw;
                    background-color: #ffffff;
                    border: solid .2667vw #ff9344;
                    padding-left: 3vw;
                    box-sizing: border-box;
                    background: url(../img/index/search.png);
                    background-repeat: no-repeat;

                    background-position: 28vw .5333vw;
                    background-size: 5vw 5vw;

                    &::placeholder {
                        font-size: 3.2vw;
                        line-height: 6.1333vw;
                        color: #7777;
                    }


                }
            }

            .txt {
                margin: 4.4vw auto 0;
                width: 68.2667vw;
                //height: 22.8vw;
                text-align: center;

                h3 {
                    font-size: 3.4667vw;
                    margin-bottom: 1.3333vw;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 16vw;
                        height: 8.5333vw;
                        line-height: 8.5333vw;
                        text-align: center;
                        background-color: #dcdcdc;
                        font-size: 2.6667vw;
                        color: #898989;

                        margin: .5333vw;
                    }
                }
            }
        }


        // 热门
        .hot {
            width: 100%;
            //height: 38.8vw;

            margin-top: 4.4vw;

            .headline {
                @extend %headline;

               .left img {
                    
                    width: 4.2667vw;
                    height: 6.2667vw;
                }
            }

            .img {
                display: flex;
                justify-content: space-between;
                width: 95%;
               
                margin: 4.1333vw auto 0;
                .left {
                    img {
                        width: 37.3333vw;
                        height: 46.9333vw;
                    }
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    
                    .top {
                        img {
                            width: 56vw;
                            height: 19.6vw;
                        }
                    }

                    .buttom {
                        display: flex;
                        justify-content: space-between;
                        img:first-child {
                            width: 26vw;
                            height: 26.2667vw;

                        }

                        img:last-child {
                            width: 28.1333vw;
                            height: 26.2667vw;

                        }
                    }

                }
            }

        }

        // 猜你搜索
        .recommend {
            width: 100%;
            //height: 38.8vw;
            margin-top: 4.4vw;

            .headline {
                @extend %headline;
                .left img {
                    
                    width: 5.4667vw;
                    height: 5.3333vw;
                }
            }
            ul{
                display: flex;
                justify-content: space-around;
                margin-top: 6.4vw;
                li{

                    img {
                        width: 28.1333vw;
                        height: 26.6667vw;
                        background-color: #b59595;
                    }
                }
            }
        }



    }


}